<template>
    <div id="qiehuan">
        <ul id="u1">
            <li class="u_li" :class="{xz:pages==1}"><router-link  tag="div"  to="/"><span class="iconfont cc">&#xe898;</span><br><p class="span2">首页</p></router-link></li>
            <li class="u_li" :class="{xz:pages==2}"><router-link  tag="div"  to="/find"><span class="iconfont cc">&#xe711;</span><br><p class="span2">发现</p></router-link></li>
            <li class="u_li" :class="{xz:pages==3}"><router-link  tag="div" to="/order"><span class="iconfont cc">&#xe606;</span><br><p class="span2">订单</p></router-link> </li>
            <li class="u_li" :class="{xz:pages==4}"><router-link  tag="div"  to="/user"><span class="iconfont cc">&#xe620;</span><br><p class="span2">我的</p></router-link></li>
        </ul>
    </div>
</template>
<script>
export default {
    props:{
        'pages':Number
    },
    mounted() {
        this.pages=this.pages
    }
}
</script>
<style lang="stylus" scoped>
    #qiehuan
        line-height: 1.2
        position fixed
        bottom 0
        left 0
        right 0
        z-index 9999
        padding-top 1.2vw
        background-color #fff
        height 13.333333vw
        border-top .1vw solid #000
        width 100%
        #u1
            width 100%
            display flex
            height 13.333333vw
            .xz
                color #0089dc
            .u_li
                display inline-block
                flex 1
                text-align center
                .cc
                    display inline-block
                    margin-top 2vw
                .span2
                    font-size .266667rem
                    line-height 6vw
</style>


